<template>
	<view>
		<Home ref="home" v-if="c_tabbar.current === 'home'"></Home>
		<My ref="my" v-if="c_tabbar.current === 'my'"></My>
		<MyTabbar :tabbar="c_tabbar.tabbar" :current="c_tabbar.current" :fns="c_tabbar.fns" @handle="c_tabbar.handle"></MyTabbar>
		<template>
			<my-popup :custom="1" :show="p_join.show" @handle="p_join.handle">
				<view class="popup1">
					<view class="popup1-title">您还没有加入班级</view>
					<view class="popup1-content">加入班级后可以发布或查看班内老师发布的班级通知</view>
					<view class="popup1-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_join.clickButton(0)">取消</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_join.clickButton(1)">立即加入</view>
					</view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import Home from '@/pages/index/components/home';
import My from '@/pages/index/components/my.vue';
import MyTabbar from '@/components/my-tabbar/my-tabbar.vue';
import { mapState, mapActions } from 'vuex';
import logInStatusTackl from '@/common/mixin/mixinLogin.js';
export default {
	data() {
		return {
			c_tabbar: {
				current: 'home',
				tabbar: {
					home: {
						text: '首页',
						iconPath: '/static/index/icon_home.png',
						selectedIconPath: '/static/index/icon_home_hl.png'
					},
					publish: {
						text: '发布',
						iconPath: '/static/index/icon_publish.png',
						selectedIconPath: '/static/index/icon_publish_hl.png'
					},
					my: {
						text: '我的',
						iconPath: '/static/index/icon_my.png',
						selectedIconPath: '/static/index/icon_my_hl.png'
					}
				},
				fns: ['clickItem'],
				handle: (fn, e, payload) => {
					if (fn === 'clickItem') this.c_tabbar.handleClickItem(payload);
				},
				handleClickItem: id => {
					if (id === 'publish') {
						if (this.logInStatusTackl()) return;
						if (this.jxyUserInfo.relateStatus === 'noClass') {
							this.p_join.show = true;
							return;
						}
						uni.navigateTo({
							url: '/packageA/pages/notice/sendNotice'
						});
						return;
					}
					this.c_tabbar.current = id;
				}
			},
			p_join: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_join.show = false;
				},
				clickButton: id => {
					this.p_join.show = false;
					if (id == 0) return;
					uni.navigateTo({
						url: '/packageA/pages/my/selectSquad'
					});
				}
			},
		};
	},
	mixins: [logInStatusTackl],
	computed: {
		...mapState({
			userProfile: state => state.User.userInfo.userProfile,
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo,
			wxUserId: state => state.User.userInfo.wxUserId
		})
	},
	methods: {
		...mapActions(['updateJxyUserInfo'])
	},
	onShow() {
		const id = this.c_tabbar.current;
		if (this.$refs[id] && typeof this.$refs[id].handleShow === 'function') {
			this.$refs[id].handleShow();
		}
	},
	async onPullDownRefresh() {
		if (this.jxyUserInfo.token) {
			uni.showLoading({
				mask: true
			});
			try {
				await this.updateJxyUserInfo();
			} catch (err) {}
			uni.hideLoading();
		}
		const id = this.c_tabbar.current;
		if (this.$refs[id] && typeof this.$refs[id].handlePullDownRefresh === 'function') {
			this.$refs[id].handlePullDownRefresh();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	onReachBottom() {
		const id = this.c_tabbar.current;
		if (this.$refs[id] && typeof this.$refs[id].handleReachBottom === 'function') {
			this.$refs[id].handleReachBottom();
		}
	},
	components: {
		MyTabbar,
		Home,
		My
	}
};
</script>

<style lang="less" scoped>
	.popup1 {
		width: 594rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		overflow: hidden;
	
		color: #222222;
	
		.popup1-title {
			font-size: 36rpx;
			text-align: center;
			font-weight: 500;
	
			padding-top: 60rpx;
		}
	
		.popup1-content {
			line-height: 60rpx;
			padding: 40rpx 30rpx;
	
			font-size: 32rpx;
		}
	
		.popup1-buttons {
			height: 90rpx;
			border-top: 2rpx solid #e3e4e699;
	
			display: flex;
	
			.button-item {
				flex: 1;
				border-right: 2rpx solid #e3e4e699;
	
				position: relative;
	
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
	
				display: flex;
				align-items: center;
				justify-content: center;
	
				&:last-child {
					border-right: none;
				}
	
				&.primary {
					color: #ff6600;
				}
			}
		}
	}
</style>
